<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端布局</title>
  <style>
    * {
      margin: 0;
    }

    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      /* IE6,7 */
      *zoom: 1;
    }

    .percent {
      width: 100%;
      max-width: 980px;
      min-width: 320px;
      margin: 0 auto;
    }

    .percent div {
      float: left;
      width: 50%;
      height: 200px;
    }

    .percent div:nth-child(1) {
      background-color: antiquewhite;
    }

    .percent div:nth-child(2) {
      background-color: aqua;
    }

    .flex {
      display: flex;
      /* flex-direction: row; */
      justify-content: center;
      flex-wrap: wrap;
      align-content: stretch;
      width: 500px;
      height: 200px;
      background-color: aqua;
    }

    .flex span {
      width: 120px;
      /* height: 20%; 侧轴拉伸不要高度 */
      background-color: violet;
      margin: 10px;
    }

    html {
      font-size: 12px;
    }

    .rem,
    .px {
      display: inline-block;
      border: 1px solid #222;
    }

    .rem {
      font-size: 2rem;
    }

    .px {
      font-size: 24px;
    }

    /* 在屏幕上并且最大宽度是 800px 来设置样式; 多种媒体特性最好由小到大设置 */
    @media screen and (max-width: 800px) {
      body {
        background-color: pink;
      }
    }
  </style>
</head>

<body>
  <h3>一. 流式布局 (百分比布局/非固定像素布局)</h3>
  <section class="percent clearfix">
    <div></div>
    <div></div>
  </section>

  <h3>二. flex 弹性布局</h3>
  <h4>1. flex 布局原理</h4>
  <p>flex 是 flexible box 的缩写, 意思是弹性盒子, 任何容器都可以指定为 flex 布局</p>
  <ul>
    <li>当我们为父盒子设定 flex 后, 子元素的 float/clear/vertical-align 将失效</li>
  </ul>
  <p>采用 flex 布局的元素, 称为 flex container "容器", 其内子元素自动称为容器成员, 称为 flex item "项目"</p>
  <ul>
    <li>item 可以横向排列也可以纵向排列</li>
  </ul>

  <h4>2. flex 常见父项属性</h4>
  <ul>
    <li>flex-direction: row | column | row/column-reverse 设置主轴的方向</li>
    <li>justify-content: flex-start/end | center | space-aroud | space-between 设置主轴上的子元素排列方式</li>
    <li>flex-wrap: nowrap | wrap 设置子元素是否换行/列</li>
    <li>align-items: stretch | flex-start/end | center 设置侧轴上的子元素的排列方式(单行/列)</li>
    <li>align-content: stretch | flex-start/end | center | space-around | space-between 设置侧轴上的子元素的排列方式(多行/列 wrap前提下)
    </li>
    <li>flex-flow: 复合属性, 相当于 flex-diretion + flex-wrap</li>
  </ul>
  <div class="flex">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>

  <h4>3. flex 常见子项属性</h4>
  <ul>
    <li>flex: n 子项目占的份数(分配剩余空间)</li>
    <li>align-self: auto | ... 控制子项目自己在侧轴的排列方式</li>
    <li>order: n (数字越小越靠前) 定义子项目的排列顺序(前后顺序)</li>
  </ul>

  <h3>三. rem 适配布局</h3>
  <h4>1. rem 单位</h4>
  <p>rem 即 root em, em 基准是相对于 html 元素的字体大小</p>
  <p class="rem">
    font-size: 2rem;
  </p>
  <p class="px">
    font-size: 24px;
  </p>

  <h4>2. 媒体查询</h4>
  <p>Media Query 使用方式 @media 可以针对不同屏幕尺寸设置不同的样式</p>
  <code>
    @media all|print|screen and|not|only (media feature) { <br>
    &nbsp;&nbsp;css-code; <br>
    }
  </code>

  <h4>3. 引入资源</h4>
  <p>当样式繁多时, 可以针对不同媒体引入不同的样式表</p>
  <code>
    link rel="stylesheet" href="style.css" media="screen and (...)"
  </code>

  <h4>4. less 基础</h4>
  <p>维护 css 的弊端</p>
  <p>css 是一门非程序式语言, 没有变量/函数/作用域等概念</p>
  <ul>
    <li>css 需要书写大量看似没有逻辑的代码, 切冗余度十分高</li>
    <li>不方便维护扩展, 不利于复用</li>
    <li>css 没有很好的计算能力</li>
  </ul>
  <p>less 的优势</p>
  <p>Leaner Style Sheets 是一门 css 拓展语言, 称为 css 预处理器; 常见的 css 预处理器: sass less stylus</p>
  <ul>
    <li>没有减少 css 的功能, 加入了程序式的特性</li>
    <li>引入了变量/混入/运算/函数等强大功能</li>
    <li>大大简化了 css 编写, 降低了 css 的维护成本</li>
  </ul>

  <h4>5. rem 适配方案</h4>
  <ol>
    <li>让一些不能等比自适应的元素, 等比例适配不同尺寸的设备</li>
    <li>使用媒体查询, 按比例设置 html 字体大小, 页面元素使用 rem 做尺寸单位</li>
    <li> less + media query + rem </li>
    <li> flexible.js + rem (推荐, 更简单) </li>
  </ol>
  <p>动态设置 font-size</p>
  <ol>
    <li>假设设计稿是 750px</li>
    <li>屏幕划分为15等分, 也可以是其他份数</li>
    <li>每一份作为 html 的 font-size 则是 50px</li>
    <li>那么 1rem = 50px</li>
    <li>在 320px 设备上, 字体大小就是 320/15=21.33px</li>
  </ol>

  <h4>6. rem 适配方案之 flexible.js (推荐, 更简单)</h4>
  <p>flexible.js 是手机淘宝团队开发的简洁高效移动端适配库</p>
  <ol>
    <li>再也不需写不用的媒体查询, js 内部做了处理</li>
    <li>原理是将当前设备划分 10 等份, 且在不同设备下, 比例是一致的</li>
    <li>只需要我们设定当前设备的 html font-size 即可</li>
    <li>假设设计稿是 750px, 那么 font-size: 75px;</li>
    <li>rem值: px / 75</li>
    <li>其他的全部交由 js 去计算</li>
  </ol>
</body>

</html>